<template>
  <view style="width: 100%; min-height: 100vh; background-color: #F8F8F8;">
    <view id="head" style="width: 100%; position:fixed; top: 0; z-index: 999;">
      <view class="bg-white" style="width: 100%;"
            :style="'height:'+custom_bar+'px'"></view>
      <view style="width: 100%;">
        <view id="search" class="cu-bar search bg-white" style="width: 100%; border: none; padding: 0 20upx;">
          <view class="search-form round">
            <image src="/static/icon/index/sousuo@2x.png" style="width: 26upx; height: 30upx; margin: 0 22upx;"></image>
            <input :adjust-position="false" type="text" placeholder="搜索" placeholder-style="color: #D8D8D8;"
                   confirm-type="search" style="font-size: 28upx; line-height: 20px !important;" v-model="search_word" @input="handleSearchResult()"></input>
          </view>
        </view>
      </view>
      <view style="width: 100%; background-color: white;">
        <scroll-view scroll-x class="bg-white nav text-center" scroll-with-animation :scroll-left="scroll_left">
          <view class="cu-item" :class="index==tab_cur?'text-red cur':''" v-for="(item,index) in tab_list" :key="index" @click="handleChangeTab(index, item.id)" :data-id="index">
            {{item.name}}<span v-if="index==tab_cur">帮帮</span>
          </view>
        </scroll-view>
      </view>
<!--      <view style="width: 100%; background-color: white;" v-if="search_word == ''">-->
<!--        <scroll-view scroll-x class="bg-white nav text-center" scroll-with-animation :scroll-left="scroll_left">-->
<!--          <view class="cu-item" :class="index==tab_cur?'text-red cur':''" v-for="(item,index) in tab_list" :key="index" @click="handleChangeTab(index, item.id)" :data-id="index">-->
<!--            {{item.name}}<span v-if="index==tab_cur">帮帮</span><span>{{ item.part_num }}</span>-->
<!--          </view>-->
<!--        </scroll-view>-->
<!--      </view>-->
    </view>
    <view>
      <view style="width: 100%; background-color: #F8F8F8;" :style="'height: '+head_height+'px;'"></view>
      <view class="flex justify-between" style="width: 100%; padding: 0 20upx; flex-wrap: wrap;" v-if="show_flag">
        <view v-if="article_data.length > 0" class="flex flex-direction bg-white list" v-for="(item,index) in article_data" :key="index" @click="handleToArticle(item.id, item.type)">
          <image :src="item.img_arr[0]" mode="aspectFill" style="width: 346upx; height: 384upx; border-radius: 20upx 20upx 0 0;"></image>
          <view class="flex flex-direction" style="padding: 20upx;">
            <view class="text-hidden" style="width: 100%; font-size: 28upx; font-weight: bold; color: black;">{{item.title}}
            </view>
            <view class="flex align-center" style="width: 100%; height: 40upx; margin: 7% 0;">
              <view class="flex justify-center align-center tag">{{item.category}}</view>
              <view style="color: #999999; font-size: 24upx; margin-left: 20upx;" v-if="item.product">{{item.sale_num}}人购买</view>
            </view>
            <view class="flex justify-between" v-if="item.product" style="margin-bottom: 7%;">
              <view v-if="item.product && item.product.sale_price == '0.00'">
                <view style="font-size: 28upx;color: #D8D8D8; font-weight: bold;">免费</view>
              </view>
              <view v-else class="flex align-center">
                <view style="font-size: 28upx; color: #E52718; font-weight: bold;">¥{{item.product && item.product.sale_price}}</view>
                <view style="font-size: 20upx; color: #D5D5D5; font-weight: bold; text-decoration: line-through; margin-left: 10upx;">¥{{item.product && item.product.show_price}}</view>
              </view>
            </view>
            <view class="flex align-center">
              <image :src="item.user && item.user.avatar" mode="aspectFill" style="width: 44upx; height: 44upx; border-radius: 50%;"></image>
              <view class="text-hidden" style="width: 55%; font-size: 24upx; color: #999999; margin-left: 10upx;">
                {{item.user && item.user.nick_name}}
              </view>
            </view>
          </view>
        </view>
        <view v-if="article_data.length == 0 && show_flag" class="justify-center align-center" style="width: 100%; margin-top: 160upx; flex-direction: column; text-align: center;">
          <image src="/static/image/no_content@2x.png" style="width: 264upx; height: 264upx;"></image>
          <view class="flex justify-center" style="font-size: 24upx; color: #999999;">暂无内容</view>
        </view>
      </view>

      <view class="flex align-center justify-center"
            v-if="article_data.length >=15"
            style="width: 100%; height: 102upx; padding: 0 50upx;">
        <view style="width: 30%; height: 2upx; background-color: #F1F1F1;"></view>
        <view style="width: 40%; text-align: center;">
          <view v-if="!bottom_flag" style="color: #CACACA; font-size: 24upx; margin: 0 40upx;">到底了</view>
          <view v-else class="action">
            <view class="cu-load" :class="!is_load?'loading':'over'" style="font-size: 28upx; color: #CACACA;"></view>
          </view>
        </view>
        <view style="width: 30%; height: 2upx; background-color: #F1F1F1;"></view>
      </view>
    </view>
  </view>
</template>

<script>
import {numSwitch} from "utils/wxUtil";
import {category_getListByCon} from "api/my/my"
import {article_getListByCon} from "api/search/search"
export default {
  data() {
    return {
      custom_bar: 0, //通知栏高度
      head_height: 0, //头部高度
      tab_cur: 0, //tab索引
      scroll_left: 0, //tab栏横向移动距离
      bottom_flag: true, //触底标识
      show_flag: false, //
      tab_list: [], //tab数据
      article_data: [], //文章数据
      category_id: '', //分类id
      search_word: '', //关键词
      is_load: true, //加载
      page: 1, //分页
    }
  },
  mounted() {
    const query = uni.createSelectorQuery().in(this);
    query.select('#head').boundingClientRect(data => {
      this.head_height = data.height + 60;
    }).exec();
  },
  methods: {
    pageInit(search_word, type){
      category_getListByCon({search_word}).then(res=>{
        this.tab_list = [];
        res.data.categorys.forEach(item=>{
          item.name = item.name.substring(0,item.name.length-2)
          this.tab_list.push(item);
        })
        if(!this.category_id){
          this.category_id = this.tab_list[0].id;
        }
        this.getArticleData(this.category_id, 1, this.search_word, type)
      })
    },
    computeNum(num) {
      return numSwitch(num);
    },
    //搜索结果
    handleSearchResult(){
      this.pageInit(this.search_word, 1)
    },
    //获取文章数据
    getArticleData(category_id, page, search_word, type){
      this.page = page;
      article_getListByCon({category_id, page, search_word}).then(res=>{
        if(type){
          this.article_data = [];
        }
        let temp = res.data.data;
        if(temp.length == 0){
          this.bottom_flag = false;
        }else {
          temp.forEach(item=>{
            this.article_data.push(item);
          })
        }
        this.show_flag = true;
      })
    },
    //去文章页
    handleToArticle(article_id, type){
      const jump_url_obj = {
        article: '/pages/article/article',
        article_product: '/pages/passBand/projectDetail/projectDetail',
        product: '/pages/passBand/otherDetail/otherDetail',
      }
      this.$uniNavigateTo({
        url: jump_url_obj[type],
        query: {
          article_id
        }
      })
    },
    //切换tab栏
    handleChangeTab(index, category_id) {
      uni.pageScrollTo({scrollTop: 0, duration: 0});
      this.bottom_flag = true;
      this.tab_cur = index;
      this.category_id = category_id;
      this.scroll_left = (index - 1) * 60;
      this.getArticleData(category_id,1 , this.search_word, 1)
    }
  },
  onShow(){
    uni.pageScrollTo({scrollTop: 0, duration: 0});
    this.custom_bar = uni.getStorageSync('system_info').statusBarHeight;
    this.pageInit(this.search_word, 1);
  },
  //上拉加载
  onReachBottom() {
    if (this.bottom_flag) {
      this.is_load = false;
      this.page += 1;
      this.getArticleData(this.category_id, this.page, this.search_word);
    } else {
    }
    console.log('上拉加载')
  },
  //下拉刷新
  onPullDownRefresh() {
    this.search_word = '';
    this.bottom_flag = true;
    this.page = 1;
    this.getArticleData(this.category_id, 1, '', 1);
    uni.stopPullDownRefresh();
  }
}
</script>

<style lang="less" scoped>
/deep/ .cu-bar .search-form {
  height: 70upx;
  border: 2upx solid #EDEDED;
  background-color: white;
}
/deep/ .cu-bar.fixed, .nav.fixed{
  box-shadow: none;
}
.list {
  width: 346upx;
  height: 618upx;
  border-radius: 20upx;
  margin-bottom: 30upx;
}

.tag {
  font-size: 22upx;
  padding: 0 12upx;
  color: #E52718;
  height: 40upx;
  background-color: #FFE9E7;
  border-radius: 4upx;
}
.text-red{
  color: #E52718;
}
</style>
